<h3>Dropdown focus tests</h3>

<form>
	<div class="mb-3 row row-cols-lg-auto">
		<div class="col-12">
			<input type="text" class="form-control me-1" style="width: 100px" placeholder="before" id="before" />
		</div>

		<div class="col-12">
			<div class="input-group">
				<div ngbDropdown class="d-inline-block me-3" [container]="container">
					<button class="btn btn-outline-secondary" id="dropdown" ngbDropdownToggle>Choose and option</button>
					<div ngbDropdownMenu aria-labelledby="dropdown">
						@if (withItems) {
							<button ngbDropdownItem id="item-1">One</button>
							<hr />
							<button ngbDropdownItem disabled>Disabled</button>
							<button class="dropdown-item">Not arrow-focusable</button>
							<hr />
							<button ngbDropdownItem id="item-2">Two</button>
						}

						@if (!withItems) {
							<button class="dropdown-item">One</button>
							<button class="dropdown-item">Two</button>
						}
					</div>
				</div>
			</div>
		</div>

		<div class="col-12">
			<button
				type="button"
				class="btn btn-outline-secondary me-1"
				id="container-inline"
				(click)="container = undefined"
			>
				Append inline
			</button>
			<button type="button" class="btn btn-outline-secondary me-1" id="container-body" (click)="container = 'body'">
				Append to body
			</button>
			<button type="button" class="btn btn-outline-secondary me-1" id="items-true" (click)="withItems = true">
				With items
			</button>
			<button type="button" class="btn btn-outline-secondary me-1" id="items-false" (click)="withItems = false">
				Without items
			</button>

			<span class="ms-3">container is {{ container ? container : 'inline' }}</span>
		</div>
	</div>
</form>
